<template>
  <view class="chat-emojis">
    <swiper
      class="chat-emojis-swiper"
      indicator-dots
      indicator-color="#dddcdd"
      indicator-active-color="#87919c"
    >
      <swiper-item v-for="(item, index) in emojiSwiperList" :key="index" class="emoji-list">
        <view
          v-for="emojiId in item"
          :key="emojiId"
          :style="{backgroundImage: `url(${getEmojiPath(emojiId)})`}"
          class="item-emoji"
          @click="handleClickEmoji(emojiId)"
        />
        <view class="item-emoji delete-icon" @click="handleBackMessage" />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import emojiMixin from './emojiMixin'
export default {
  name: 'chat-emojis',
  mixins: [emojiMixin],
  data() {
    return {
      emojiSwiperList: []
    }
  },
  mounted() {
    this.sliceEmojis()
  },
  methods: {
    /**
     * 将emoji按20个每组分割
     */
    sliceEmojis() {
      const emojis = this.emojis
      const array = []
      for (let i = 0; i < emojis.length; i += 20) {
        array.push(emojis.slice(i, i + 20))
      }
      this.emojiSwiperList = array
    },
    /***
     * 点击Emoji
     * @param emojiId
     */
    handleClickEmoji(emojiId) {
      this.$emit('click-emoji', emojiId)
    },
    /**
     * 删除消息
     */
    handleBackMessage() {
      this.$emit('back-message')
    }
  }
}
</script>

<style lang="scss" scoped>
.chat-emojis {
  width: 100%;
  height: calc(460rpx - 68rpx);
}
.chat-emojis-swiper {
  width: 100%;
  height: 390rpx;
  padding-top: 30rpx;
  box-sizing: border-box;
}
.emoji-list {
  padding: 0 12rpx;
  height: 300rpx;
  box-sizing: border-box;
  clear: both;
  .item-emoji {
    float: left;
    width: calc((100% - 24rpx) / 7);
    height: 100rpx;
    background-size: 55rpx 55rpx;
    background-repeat: no-repeat;
    background-position: center center;
    &.delete-icon {
      background-size: 60rpx 55rpx;
      background-image: url('');
    }
  }
}
</style>
